<template>
  <div>
    <div class="text" v-if="flag">Text.vue 组件 有{{books}} 本图书</div>
    <button v-on:click="flag = false">销毁组件</button>
    <p>message的值是 {{ message }}</p>
    <button v-on:click="message = 'how are you'">修改 message值 </button>
  </div>
</template>

<script>
export default {
    props:{
        info:{
            type: String,
        }
    },
    data(){
        return{
            message: 'hello Vue',
            books: '',
            flag: true,
        }
    },
    methods:{
        show(){
            console.log('创建了 Show')
        },
        initBooklist(){
            const xml = new XMLHttpRequest()
            xml.addEventListener('load',() =>{
                const result = JSON.parse(xml.responseText)
                console.log(result.data.length)
                this.books = result.data.length
            }),
            xml.open('get','http://www.liulongbin.top:3006/api/getbooks')
            xml.send()
            
        }
    },
    // 创建生命周期函数
    beforeCreate(){
        // console.log(this.info)
        console.log(this.message)
    },
    // created 生命周期 函数非常常用
    // 经常在这生命周期里面 调用 methods 中的方法 请求服务器的数据
    // 在这期间 props data methods 都是 可用的
    created(){
        // console.log(this.info)
        // console.log(this.message)
        // console.log(this.show)
        console.log(this.initBooklist())
    },
    // 第一次渲染 DOM 结构
    mounted(){
        console.log(this.$el)
        
    },
    // 将要根据变化过后 最新的数据重新渲染 组件的模板结构
    beforeUpdate(){
        // console.log(this.message)
    },
    // 当数据变化之后 为了操作最新的 DOM　结构　必须把代码写到　updted 元素里面
    updated(){
        console.log(this.message)
    },
    //  将要销毁的组件 此时尚未销毁 组价还处于 正常工作状态 
    // 销毁当前的 侦听器 子组件 时间监听
    beforeDestroy(){
        console.log(this.message)
    },
    // 当前组件已经完全被销毁 此组件的 DOM 结构在浏览器中完全被移除
    destroyed(){
        console.log('11')
    }
}
</script>

<style lang="less" scoped>
.text {
  height: 200px;
//   background-color: red;
  color: white;
}
</style>